<template>
  <Row class="vm-table vm-panel">
    <div class="bg-light lter b-b wrapper-md clearfix titleBtns w-p" style="color: black">
      <h2 class="m-n font-thin pull-left">交通线路管理</h2>
    </div>

    <div class="wrapper-md text-s">
      <div class="panel panel-default form-horizontal form" role="form" >

        <Row type="flex" justify="space-between" class="control" style="color: gainsboro">
          <div class="table-style">
            <Select v-model="line" placeholder='请选择线路' clearable style="width:30%">
              <Option v-for="item in lines" :value="item.value" :key="item.value">{{item.label}}</Option>
            </Select>
              <Input  style="width: 30%" type="text" placeholder="请输入初始站点" v-model="startroad"/>
              <Input  style="width: 30%;margin-right: 10px" placeholder="请输入终点站" type="text" v-model="endroad"/><br/>

            <Button @click="find" style="background-color:#57A3F3;color: floralwhite" >
              查询
            </Button>

            <Button @click="modalAdd = true" style="background-color:#57A3F3;color: floralwhite" >
             新建
            </Button><br/>
          </div>
        </Row>
        <!-- 2.2 显示内容表格 -->
        <Table stripe
               :data="tableData"
               width="100%"
               :columns="tableColumns"
               @on-select="onSelect"
               @on-select-all="onSelectAll"
               @on-selection-change="onSelectionChange"
               size="small">
        </Table>
        <!-- 2.3 分页导航navigation -->
        <Row type="flex" justify="space-between" class="footer">
          <div></div>
          <div style="align-content: center;overflow: hidden">
            <Page :total="total"
                  @on-page-size-change="pageSizeChange"
                  @on-change="changePage"
                  :current="page.page"
                  :pageSize="page.size" size="small"
                  placement="top" show-elevator show-sizer ></Page>
          </div>
        </Row>
        <!-- 新增modal -->
        <Modal
          v-model="modalAdd"
          title="新增交通线路"
          width="25%"
          ok-text="OK"
          cancel-text="Cancel"
          @on-ok="modalAddOk('formAddData')"
          @on-cancel="modalAddCancel('formAddData')">
          <Form v-model="formAddData">
            <FormItem>
              <Input style="width: 75%"  type="text" v-model="formAddData.line" placeholder='请输入线路名称'>
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem>
              <Input  style="width: 75%" type="text" v-model="formAddData.startroad" placeholder='请输入初始点'>
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem>
              <Input  style="width: 75%" type="text" v-model="formAddData.road2" placeholder='请输入站点2'>
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem>
              <Input  style="width: 75%" type="text" v-model="formAddData.road3" placeholder='请输入站点3'>
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem>
              <Input  style="width: 75%" type="text" v-model="formAddData.endroad" placeholder='请输入终点'>
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
          </Form>
        </Modal>
        <!-- 编辑modal -->
        <Modal
          v-model="modalEdit"
          title="编辑交通线路"
          width="25%"
          ok-text="OK"
          cancel-text="Cancel"
          @on-ok="modalEditOk()"
          @on-cancel="modalEditCancel('formEditData')">
          <Form v-model="formEditData" ref="formEditData">
            <FormItem label="编  号">
              <Input style="width: 75%" type="text" v-model="formEditData.id" disabled>
              <Icon type="ios-person-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem label="线  路">

              <Input  style="width:  75%" type="text" v-model="formEditData.line">
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem label="始发站">

              <Input  style="width:  75%" type="text" v-model="formEditData.startroad">
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem label="站点二">

              <Input  style="width:  75%" type="text" v-model="formEditData.road2">
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem label="站点三">

              <Input  style="width:  75%" type="text" v-model="formEditData.road3">
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
            <FormItem label="终点站">
              <Input  style="width:  75%" type="text" v-model="formEditData.endroad">
              <Icon type="ios-locked-outline" slot="prepend"></Icon>
              </Input>
            </FormItem>
          </Form>
        </Modal>
        <!-- 删除modal -->
        <Modal
          v-model="modalDelete"
          title="删除用户"
          width="15%"
          ok-text="OK"
          cancel-text="Cancel"
          @on-ok="modalDeleteOk">
          您确定删除吗？
        </Modal>
      </div>
    </div>

  </Row>

</template>
<script>
  export default {
    data () {
      return {
        data: {},
        total: 10,
        page: {
          size: 5,
          page: 1
        },
        searchUrl: '/trafficline',
        title: '线路管理',
        tableData: [],
        line: '',
        startroad: '',
        endroad:'',
        lines: [
          {
            value:'',
            label:''
          }
        ],
        tableColumns: [
          {
            title: '编号',
            key: 'id',
            width:50,
            align: 'center',
            fixed: 'left'
          },
          {
            title: '线路',
            key: 'line',
            align: 'center'
          },
          {
            title: '始发站',
            key: 'startroad',
            align: 'center'
          },
          {
            title: '站点二',
            key: 'road2',
            align: 'center'
          },
          {
            title: '站点三',
            key: 'road3',
            align: 'center'
          },
          {
            title: '终点站',
            key: 'endroad',
            align: 'center'
          },

          {
            title: '操作',
            key: 'action',

            align: 'left',
            fixed: 'right',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editShow(params)
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.editRemove(params)
                    }
                  }
                }, '删除')
              ])
            }
          }
        ],
// modal显示：新增、删除、编辑
        modalAdd: false,
        modalDelete: false,
        modalEdit: false,
        // 新增表单选项
        formAddData: {
          line: '',
          startroad: '',
          road2: '',
          road3: '',
          endroad: ''
        },
        deleteData:{
            id: ''
        },
        // 编辑表单选项
        formEditData: {
          id: '',
          line: '',
          road2: '',
          road3: '',
          startroad: '',
          endroad: ''
        }
      }
    },
    methods: {
      // 分页查询
      searchDatas: function (page, size) {
        this.searchUrl = '/trafficline'
        this.data = {
          page: {
            page: page,
            size: size

          }
        }
        this.searchPost(this.searchUrl, this.data)
      },
      // 改变页数
      changePage: function (page) {
        this.page.page = page
        this.getAllPerson(this.page)
        console.log(this.page)
      },
      pageSizeChange: function (pageSize) {
        this.page.size = pageSize
      },
      // 新增modal 确定按钮
      modalAddOk () {
          if(this.formAddData.line&& this.formAddData.startroad&& this.formAddData.endroad) {
            if(this.lines.length>0){
                for (var i=0,length=this.lines.length;i<length; i++) {
                    if(this.lines[i].line == this.formAddData.line){
                      this.$Message.error('该线路已经存在不能添加！！！');
                      return;
                    }
              }

              this.$http.post('/trafficline/add', this.formAddData).then(
                function (res) {
                  if (res.status === 200) {
                    this.$Message.success('保存成功')
                    this.getAllPerson(this.page)
                    this.formAddData.line = '';
                    this.formAddData.startroad = '';
                    this.formAddData.road2 = '';
                    this.formAddData.road3 = '';
                    this.formAddData.endroad = '';

                  } else {
                    this.$Message.error('保存失败')
                  }
                }
              )

            }else{
              this.$http.post('/trafficline/add', this.formAddData).then(
                function (res) {
                  if (res.status === 200) {
                    this.$Message.success('保存成功')
                    this.getAllPerson(this.page)
                    this.formAddData.line = '';
                    this.formAddData.startroad = '';
                    this.formAddData.road2 = '';
                    this.formAddData.road3 = '';
                    this.formAddData.endroad = '';

                  } else {
                    this.$Message.error('保存失败')
                  }
                }
              )

            }




          }else{
            this.$Message.error('输入内容有误请正确输入');
          }
      },
      // 新增modal 取消按钮
      modalAddCancel (name) {
n
        if (this.$refs[name]!==undefined) {
          this.$refs[name].resetFields();
        }

      },
      // 编辑modal 确定按钮
      modalEditOk () {
          if(this.formEditData.line && this.formEditData.startroad && this.formEditData.endroad) {
            if(this.lines.length>0){
              for (var i=0,length=this.lines.length;i<length; i++) {
                if((this.lines[i].line == this.formEditData.line)&&(this.lines[i].id!=this.formEditData.id)){
                  this.$Message.error('该线路已经存在不能修改！！！');
                  return;
                }
              }

              this.$http.post('/trafficline/update', this.formEditData).then(
                function (res) {
                  if (res.status === 200) {
                    this.$Message.success('更新成功')
                    // 重新刷新当前页面
                    this.getAllPerson(this.page)
                  } else {
                    this.$Message.error('更新失败')
                  }
                }
              )



            }else{


              this.$http.post('/trafficline/update', this.formEditData).then(
                function (res) {
                  if (res.status === 200) {
                    this.$Message.success('更新成功')
                    // 重新刷新当前页面
                    this.getAllPerson(this.page)
                  } else {
                    this.$Message.error('更新失败')
                  }
                }
              )
            }

          }else{
            this.$Message.error('输入内容有误请正确输入');
          }
      },
      // 编辑modal 取消按钮
      modalEditCancel (name) {

        if (this.$refs[name]!==undefined) {
          this.$refs[name].resetFields();
        }

      },
      // 删除model 确定按钮
      modalDeleteOk () {
        // 删除
        this.$http.post('/trafficline/del',this.deleteData).then(
          function (res) {
            console.log("***********************");
              console.log(this.deleteData);
            if (res.status === 200) {
              this.$Message.success('删除成功')
              this.getAllPerson(this.page)
            } else {
              this.$Message.error('删除用户失败')
            }
          }
        )
      },
      // 数据显示 的 编辑按钮
      editShow (params) {
        this.formEditData.id = params.row.id
        this.formEditData.line = params.row.line
        this.formEditData.startroad = params.row.startroad
        this.formEditData.road2 = params.row.road2
        this.formEditData.road3 = params.row.road3
        this.formEditData.endroad = params.row.endroad
        this.modalEdit = true
      },
      // 数据显示 的 删除按钮
      editRemove (params) {
          this.deleteData.id=params.row.id;
          console.log(this.deleteData.id);
        this.modalDelete = true
      },
      // 数据表格 多选情况下的 选择回调
      onSelect (selection, row) {
        this.batchDelete = []
        for (let i = 0; i < selection.length; i++) {
          this.batchDelete.push(selection[i].id)
        }
      },
      // 数据表格 多选情况下 全选回调
      onSelectAll (selection) {
        this.batchDelete = []
        for (let i = 0; i < selection.length; i++) {
          this.batchDelete.push(selection[i].id)
        }
      },
      // 数据表格 多选情况下 修改选择回调
      onSelectionChange (selection) {
        this.batchDelete = []
        for (let i = 0; i < selection.length; i++) {
          this.batchDelete.push(selection[i].id)
        }
      },
      getAllPerson (page) {
        var pp = parseInt(page.page) - 1;
        this.$http.get('/trafficline/findAll?page=' + pp + '&size=' + page.size).then(
          (res) => {
            if (res.status === 200) {
              console.log(res.body)
              this.tableData = res.body.body.content
              this.total = res.body.body.totalElements

            }
          }
        )
      },
find(){
          //如果初始站和终点站都有值按照两站之间查询否则就select ..... or 用法查询，
if(this.startroad&&this.endroad) {
  this.$http.get('/trafficline/findAllByStartroadAndEndroad?startroad='+this.startroad+'&endroad='+this.endroad).then(
    (res) => {

      if (res.status === 200) {
        console.log("22222222")
        console.log(res.body.body.content)
        if(res.body.body.content.length>0){
          this.tableData = res.body.body.content
          this.total = res.body.body.totalElements

        }else{

          this.$Message.info("没有搜索到数据")
        }


      }else{

        this.$Message.info("没有搜索到数据")
      }
    }
  )
}
else if(!this.startroad&&!this.endroad&&!this.line){
  this.getAllPerson(this.page)
}
else
    {
  this.$http.get('/trafficline/findAllByLineOrStartroadOrEndRoad?line=' + this.line +'&startroad='+this.startroad+'&endroad='+this.endroad ).then(
    (res) => {

      if (res.status === 200) {
        console.log("22222222")
        console.log(res.body.body.content)
        if(res.body.body.content.length>0){
          this.tableData = res.body.body.content
          this.total = res.body.body.totalElements

        }else{

          this.$Message.info("没有搜索到数据")
        }


      }else{

        this.$Message.info("没有搜索到数据")
      }
    }
  )

}


},
      findAllLine() {
        this.$http.get('/trafficline/findAll2').then(
          (res) => {
            console.log(res.body.length)
            if(res.body.length>0){
              this.lines=res.body;

              for(var i=0,length=res.body.length;i<length;i++){
                this.lines[i].value=res.body[i].line;
                this.lines[i].label=res.body[i].line;

              }

            }

          }
        )

      }
    },
    created () {
      this.findAllLine();
      this.getAllPerson(this.page)
    }
  }
</script>
